<template>
	<view>
		<u-navbar title="我的项目" :autoBack="true" :placeholder="true" bgColor="#F8F9FE"></u-navbar>
		<view class="proj_box" v-for="item in list" :key="item.id" @click="todetail(item)">
			<template v-if="item.status===3">
				<view class="proj_item flexA">
					<view class="item_label" style="color: #FC4338;">失败原因：</view>
					<view class="item_name" style="color: #FC4338;">{{item.turn_mess}}</view>
				</view>
			</template>
			<view class="proj_item flexA">
				<view class="item_label">项目名称：</view>
				<view class="item_name">{{item.name}}</view>
			</view>
			<view class="proj_item flexA">
				<view class="item_label">服务类型：</view>
				<view class="item_name">{{item.service_type===1?'上门':'到店'}}</view>
			</view>
			<view class="proj_item flexA">
				<view class="item_label">所在城市：</view>
				<view class="item_name">{{item.newarea.name}}</view>
			</view>
			<template v-if="item.status===3">
				<image src="http://qiniu.suboshimuying.cn/static/merchant/ic_status02.png" mode=""></image>
			</template>
			<template v-if="item.status===1">
				<image src="http://qiniu.suboshimuying.cn/static/merchant/ic_status03.png" mode=""></image>
			</template>
			<template v-if="item.status===2">
				<image src="http://qiniu.suboshimuying.cn/static/merchant/ic_status01.png" mode=""></image>
			</template>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: []
			};
		},
		onLoad() {
			this.getMyProject()
		},
		methods: {
			// 获取项目列表
			async getMyProject() {
				let res = await this.$api.getMyProject()
				this.list = res.data.data
				// 'status': '审核状态:1=审核中,2=审核成功,3=审核失败'
				// 'turn_mess': '失败原因'
			},
			//去详情
			todetail(item) {
				uni.navigateTo({
					url: `/subPages/merchant/myProDetail?item=${JSON.stringify(item)}`
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f8f9fd;
	}

	.proj_box {
		margin: 32rpx auto;
		padding: 32rpx;
		box-sizing: border-box;
		position: relative;
		width: 702rpx;
		// height: 252rpx;
		border-radius: 24rpx;
		opacity: 1;
		background: rgba(255, 255, 255, 1);

		image {
			position: absolute;
			right: 0;
			bottom: 0;
			width: 128rpx;
			height: 128rpx;
			opacity: 1;
		}

		.proj_item {
			margin-bottom: 24rpx;

			.item_label {
				min-width: 144rpx;
				color: rgba(0, 0, 0, 0.4);
				font-size: 28rpx;
			}

			.item_name {
				color: rgba(0, 0, 0, 0.8);
				font-size: 28rpx;
				text-overflow: ellipsis;
				overflow: hidden;
				white-space: nowrap;
			}
		}
	}
</style>
